<script setup>
	import {
		onActivated,
		onMounted,
		ref
	} from "vue";
	import {
		apiServiceList,
		delProject
	} from "@/api/service";
	import AddVue from "./add/index";
	import {
		delay
	} from "@/utils";
	import {
		toast
	} from "@/hook/toast";
	import confirm from "@/libs/confirm";
	// 参数定义的值
	const formData = ref({})
	const loading = ref(false)
	const formRef = ref(null)
	const list = ref([])
	const tableHeight = ref(500)
	const contentRef = ref(null)
	async function initData() {
		if (loading.value) return
		loading.value = true
		const {
			page,
			size
		} = paginationData.value
		const resp = await apiServiceList({
			page,
			list_rows: size
		})
		// 分页功能展示
		await delay(300)
		const {
			code,
			data,
			msg
		} = resp
		if (code !== 1) {
			loading.value = false
			return toast({
				title: msg,
				type: 'error'
			})
		}
		const {
			total,
			data: listData,
			current_page
		} = data
		paginationData.value.total = total
		paginationData.value.page = current_page

		if (!!listData && listData.length) {
			list.value = listData
		}
		loading.value = false
	}
	onActivated(() => {
		initData()
	})

	function searchHandle() {

	}

	function addSuccess() {
		resetForm()
	}

	function resetForm() {
		formRef.value.resetFields()
		paginationData.page = 1
		formData.value = ''
		list.value = []
		initData()
	}

	function addHandle() {
		visible.value = true
	}
	const visible = ref(false)

	function initHeight() {
		const element = contentRef.value
		if (!element) return
		const {
			height
		} = element.getBoundingClientRect()
		tableHeight.value = height
	}

	function editHandle() {

	}
	// 删除
	async function confirmDelete(yewucompany_id) {
		const resp = await delProject({
			yewucompany_id
		})
		const {
			code,
			msg
		} = resp
		const codeEnum = {
			0: 'error',
			1: 'success',
		}
		toast({
			title: msg,
			type: codeEnum[code]
		})
		if (code !== 1) return
		await initData()
	}

 	 function deleteHandle({
		name,
		id
	}) {
		console.log('删除')
		
		confirm({
		  title: '删除提示',
		  message: `你确定删除 ${name} 吗？`,
		  confirmBtnText: '删除',
		  cancelBtnText: '取消',
		}).then(async () => {
		  const resp = await delProject({
		    yewucompany_id: id
		  })
		  const {code, msg} = resp
		  toast({
		    title: msg,
		    type: code === 1 ? 'success' : 'error'
		  })
		  if (code !== 1) return
		  await initData()
		}).catch(() => {
		})
		
		
		// confirm({
		// 	title: '删除提示',
		// 	message: `你确定删除 ${name} 吗？`,
		// 	confirmBtnText: '删除',
		// 	cancelBtnText: '取消',
		// }).then(async () => {
		// 	const resp = await delProject({
		// 		yewucompany_id: id
		// 	})
		// 	const {
		// 		code,
		// 		msg
		// 	} = resp
		// 	toast({
		// 		title: msg,
		// 		type: code === 1 ? 'success' : 'error'
		// 	})
		// 	if (code !== 1) return
		// 	await initData()
		// }).catch(() => {})


		// confirm({
		// 	message: `您确定要删除 ${name} ？`,
		// 	title: '温馨提示!',
		// 	confirmBtnText: '删除',
		// 	cancelBtnText: '取消',
		// }).then(() => confirmDelete(id)).catch(() => {})

	}
	const paginationData = ref({
		total: 0,
		size: 15,
		page: 1
	})
	// 分页 展示
	function pageChange(val) {
		console.log('第几页', val);
		paginationData.value.page = val
		console.log(paginationData.value.page, '页面');
		initData();
	}
	onMounted(() => {
		initHeight()
	})
</script>

<template>
	<div class="card_wrap service-container-wrap">
		<el-row class="top_header" justify="space-between">
			<el-form inline ref="formRef" hide-required-asterisk :model="formData">
				<el-form-item label="名称:" prop="name">
					<el-input placeholder="请输入项目名称" v-model="formData.name" />
				</el-form-item>
				<el-form-item>
					<el-space>
						<el-button @click="searchHandle" type="primary" icon="Search">搜索</el-button>
						<el-button type="danger" plain @click="resetForm">重置</el-button>
					</el-space>
				</el-form-item>
			</el-form>
			<el-button type="success" @click="addHandle">添加业务公司</el-button>
		</el-row>
		<div class="relative w-100 flex-1">
			<div class="absolute inset " ref="contentRef">
				<el-table border v-loading="loading" :data="list" fit style="width: 100%" :height="tableHeight">
					<el-table-column label="公司名称" prop="name" />
					<el-table-column label="操作" width="280">
						<template #default="{row}">
							<el-space>
								<el-button type="info" plain size="small" @click="editHandle(row)">编辑</el-button>
								<el-button type="danger" plain size="small" @click="deleteHandle(row)">删除</el-button>
								<!--                <el-button type="warning" plain size="small" @click="confirmHandle(row)">结算</el-button>-->
							</el-space>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="page-footer">
			<el-pagination layout="prev, pager, next" :total="paginationData.total" :page-size="paginationData.size"
				:current_page="paginationData.page" @current-change="pageChange" />
		</div>
		<div class="absolute">
			<add-vue ref="addRef" v-model="visible" @add-success="addSuccess" />
		</div>

	</div>
</template>

<style scoped lang="scss">
	.service-container-wrap {
		display: flex;
		flex-flow: column;

		.top_header {
			margin-bottom: 16px;
		}

		.page-footer {
			padding: 8px;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>